<template>
  <div class="myChart1" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    var myChart = echarts.init(document.querySelector('.myChart1'))
    var value = 0.42
    var value1 = 0.32
    myChart.setOption(
      {
        backgroundColor: '#fff',
        title: [
          {
            text: '运输中 53',
            x: '17%',
            y: '78%',
            textStyle: {
              fontSize: 14,
              fontWeight: '100',
              color: '#000',
              lineHeight: 16,
              textAlign: 'center'
            }
          },
          {
            text: '派送中 34',
            x: '68%',
            y: '78%',
            textStyle: {
              fontSize: 14,
              fontWeight: '100',
              color: '#000',
              lineHeight: 16,
              textAlign: 'center'
            }
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '47%',
            center: ['25%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5'
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2'
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'RGBA(51, 66, 127, 0.7)'
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 30,
                  color: '#fff'
                }
              }
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#112165'
              }
            }
          },

          { // 第二个球的填充
            type: 'liquidFill',
            radius: '47%',
            center: ['75%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#2aa1e3'
                  },
                  {
                    offset: 1,
                    color: '#08bbc9'
                  }
                ],
                globalCoord: false
              }
            ],
            data: [value1, value1], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'RGBA(51, 66, 127, 0.7)'
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 28,
                  color: '#fff'
                }
              }
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#112165'
              }
            }
          }
        ]
      }
    )
  }
}
</script>

<style scoped>
  .myChart1{
    height: 260px;
    width: 490px;
  }
</style>
